<template>
  <!-- 急速问诊页面 -->
  <div class="boxs">
    <div class="tud">
      <div class="tud-img">
        <img
          class="tu1"
          src="../../images/a35c21168c67971c4f2684fb25fae1bb.png"
          alt=""
        />
        <img
          class="tu2"
          src="../../images/fcf3c3f12cd83c09e22c5cab0f34690e.png"
          alt=""
        />
      </div>
      <div class="tud-text1">3分钟内极速响应</div>
      <div class="tud-text1-1"></div>
      <div class="tud-text1-2"></div>
      
      <div class="lun">
        <van-swipe style="height: 200px;" autoplay="3000" vertical :show-indicators="false">
          <van-swipe-item>
            <img src="../../images/37c3ea6beec64369c2642b92c6726f1e.png" alt="">
            <p>发起了图文定向问诊￥{{ num }}</p>
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../images/37c3ea6beec64369c2642b92c6726f1e.png" alt="">
            <p>发起了图文定向问诊￥{{ num1 }}</p>
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../images/37c3ea6beec64369c2642b92c6726f1e.png" alt="">
            <p>发起了图文定向问诊￥{{ num2 }}</p>
          </van-swipe-item>
        </van-swipe>
      </div>
     
    </div>
    <div class="tuz"></div>
    <div class="textz">
      <div class="yi">
        <p>值班医生</p>
        <img src="../../images/45a28b48133b9deb4582d5d067ec280e.png" alt="">
      </div>
      <div class="yi">
        <p>服务承诺</p>
        <div class="shim"><b>●</b>实名认证医生</div>
      </div>
    </div>
    <div class="textx">
      <div class="tw">
        <img src="../../images/921ba673c0d761cc02894b46f613fdd8.png" alt="">
      </div>
      <div class="tw">
       <img src="../../images/d89b166bc507a4b4df1bd6c1baa29204.png" alt="">
      </div>
      <div class="tw">
        <img src="../../images/de3f7782aa370ff00d73c26190a93649.png" alt="">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const max = 10
const num =ref((Math.random()*max).toFixed(1))
const num1 =ref((Math.random()*max).toFixed(1))
const num2 =ref((Math.random()*max).toFixed(1))
const router = useRouter()

</script>

<style lang="scss">
.boxs{
  width: 100%;
  height: 100vh;
  background-color: #f1efef;
  font-size: 0.5rem;
}
.tud {
  width: 100%;
  height: 26.4vh;
  background-color: #0a6bff;
  position: fixed;
  .tud-img {
    display: flex;
    .tu1 {
      width: 50%;
      height: 13.3vh;
    }
    .tu2 {
      width: 50%;
      height: 26.5vh;
    }
  }
  .tud-text1 {
    width: 2.2rem;
    height: 0.5rem;
    background-color: rgba(0, 0, 0, 0.1);
    font-size: 0.28rem;
    position: fixed;
    top: 2rem;
    left: 0.3rem;
    padding-left: 0.2rem;
    border-top-left-radius: 0.1rem;
    border-bottom-left-radius: 0.1rem;
    color: aliceblue;
  }
  .tud-text1-1 {
    width: 0.4rem;
    height: 0.25rem;
    position: fixed;
    top: 2rem;
    left: 2.696rem;
    background-color: rgba(0, 0, 0, 0.1);
    background: linear-gradient(
      to left bottom,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0.1) 100%
    );
  }
  .tud-text1-2 {
    width: 0.4rem;
    height: 0.25rem;
    position: fixed;
    top: 2.25rem;
    left: 2.696rem;
    background: linear-gradient(
      to left top,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0.1) 100%
    );
  }
  .lun{
    width: 4.2rem;
    height: .6rem;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: .3rem;
    position: fixed;
    overflow: hidden;
    top: 2.65rem;
    .van-swipe{
      width: 100%;
      height: .6rem;
      padding-left: 0.2rem;
    }
    .van-swipe-item{
      width: 100%;
      height: .6rem;
      font-size: 0.4rem;
      img{
        width: 10%;
        height: .5rem;
        float: left;
      }
      p{
        width: 90%;
        height: .5rem;
        float: left;
        font-size: 0.3rem;
        margin: 0;
        padding-top: 0.05rem;
      }
    }
  }
}
.tuz{
  width: 100vw;
  height: 14vh;
  position: fixed;
  margin-top: 3.5rem;
  background: linear-gradient(#116bf4, rgb(166, 220, 244));
}
.textz{
  width: 90%;
  height: 2.4rem;
  background-color: #fff;
  position: fixed;
  top: 3.5rem;
  left: 5%;
  border-radius: .2rem;
  .yi{
    font-size: 0.33rem;
    float: left;
    width: 100%;
    height: 1rem;
    padding-left: 3%;
    p{
      float: left;
      width: 23%;
      color: #a1a0a0;
    }
    img{
      margin-top: 0.15rem;
      line-height: 1.2rem;
      width: 73%;
    }
    .shim{
      line-height: 1.15rem;
      width: 73%;
      font-size: 0.35rem;
        color: #7a7979;
      b{
        float: left;
        font-size: .4rem;
        color: #0a6bff;
        margin-right: 0.2rem;
      }
    }
  }
}
.textx{
  width: 90%;
  height: 6rem;
  background-color: #fff;
  position: fixed;
  top: 6.2rem;
  left: 5%;
  border-radius: .2rem;
  .tw{
    width: 100%;
    height: 2rem;
    border-bottom: .01rem solid #f1efef;
    img{
      float: left;
      width: 92%;
      height: 1.5rem;
      margin-top: 0.25rem;
      margin-left: 4%;
    }
  }
}
</style>
